	<template>
	<view class="head">

		<view style="width: 100%; background-size: 100% 100%;height: 100px; position: relative;	background-image: url(../../static/msg.jpg);padding-top: 150rpx;">
			</view>
			<view style="position: relative;">
					<tabbar style="position: absolute;top: -50rpx;left:0%; z-index: 99; width: 100%; background-color: #ffffff;border-radius: 38rpx;margin: 0 auto;" :tablist="tabBars" @upp="changTabbea" :ppp="tabbarIndex"></tabbar>
					<swiper 
					:style="{height:viewHeight+'px'}" 
					:current="swiperindex"
					@change="changeimg"
					>
						<swiper-item v-for="(item,index) in tabBars" :key="index">
							<view class="swiper-item">
								<scroll-view 
								:scroll-y="true" 
								:style="{height:viewHeight+'px'}" 
								@scrolltolower="more(index)" >
									<view> 
										<block v-for="(item,index1) in item.list" :key="index1">
												<index-list :item="item" ></index-list>
										</block>
									</view> 
									<view class="loading">{{loading}}</view>
								</scroll-view>
							</view>		
						</swiper-item>
					</swiper>
					
			</view>
	</view>

</template>
<script>
	import indexList from "../../components/img-list.vue";
	import tabbar from "../../components/tabbar.vue";
	
	import a from '../../js/request.js';
	var http =new a
	export default {
		data() {
			return {
				viewHeight:500,
				tabbarIndex:0,
				swiperindex:0,
				loading:'没有更多啦',
				api:{
					url:'https://api.ixiaowai.cn/api/api.php?return=json'
				},
				triggered:false,
				// 以后避免对象是数
				tabBars: [{
				    name: '推荐',
					list:[
				   	// 数据的传入
				   	{
				   		typesrc:"https://tva2.sinaimg.cn/large/0072Vf1pgy1foxk44i0ekj31hc0u0drp.jpg"
				   	},
				   	{
				   		typesrc:"https:\/\/tva2.sinaimg.cn\/large\/87c01ec7gy1frmbmbqjrsj21hc0u0nb8.jpg"
				   	},
					{
						typesrc:"https://tva2.sinaimg.cn/large/0072Vf1pgy1foxkg3fvi4j31hc0u0h35.jpg"
					}
				   ]
				},
				{
				    name: '二次元',
					list:[
				   	// 数据的传入
				   	{
				   		typesrc:"https://tva3.sinaimg.cn/large/0072Vf1pgy1foxkiuh7a2j31hc0u0wwz.jpg"
				   	},
				   	{
				   		typesrc:"https://tva2.sinaimg.cn/large/0072Vf1pgy1foxlny0lgrj31kw0w0e2v.jpg"
				   	}
				   ]
				},{
					// 还没找到的类似api
				    name: '萌宠',
					list:[]
				},{
				    name: 'COS装',
					list:[]
				},
				{
				    name: '其他',
					list:[]
				}
				],
			}
		},
		methods:{
			// 上拉加载更多
			more(index)
			{
					// 服务器
					let listmodel=
						{
							typesrc:""
						}
							for(var k=0;k<1;k++)
							{
								http.request(this.api).then((e)=>
									{
										console.log(e.data.imgurl)
										listmodel.typesrc=e.data.imgurl
										this.tabBars[index].list.push(listmodel)
									})
							}
			},
			// img改tabbar
			changeimg(e)
			{
				this.tabbarIndex=e.detail.current
			},
			// tabbar改img
			changTabbea(str)
			{
				this.swiperindex=str
			}
		},
		components:{
			indexList,
			tabbar
		},
		onLoad() {
			// 适配手机屏幕
			uni.getSystemInfo({
			    success: (res)=> {
					let height=res.windowHeight-uni.upx2px(95)
					this.viewHeight=height
			    }
			}),
			this._freshing = false;
			setTimeout(() => {
			    this.triggered = true;
			}, 1000)
		}
	}
</script>

<style>
	.loading{
		text-align: center;
		color: #929292;
	}
</style>
